<template>
    <div>
      <!--模糊查询-->
      <div>
        <el-form :inline="true" :model="pageData" class="demo-form-inline">
          <el-form-item label="客户端名称：" style="font-weight: bold">
            <el-input v-model="pageData.clientName" placeholder="请输入客户端名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-search" @click="selectSub">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small" icon="el-icon-refresh" @click="replacement">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="insertSub">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--主表格-->
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="id"
          label="序号"
          width="80">
        </el-table-column>
        <!--超链接-->
        <el-table-column
          prop="clientName"
          label="客户端名称">
          <template slot-scope="scope">
            <el-link type="primary" @click="getMessage(scope.row)" :underline="false">{{scope.row.clientName}}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="clientId"
          label="客户端ID">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注">
        </el-table-column>
        <el-table-column
          prop="sort"
          label="排序">
        </el-table-column>
        <!--状态开关-->
        <el-table-column
          prop="statusId"
          label="状态">
          <template slot-scope="scope"><!--获取行数据方法-->
            <el-switch
              v-model="scope.row.statusId"
              active-color="#ff4949"
              inactive-color="#13ce66"
              active-text="禁用"
              inactive-text="正常"
              :active-value="1"
              :inactive-value="0"
              @change="changeStu(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <!--行尾操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页插件-->
      <div style="text-align: right">
        <el-pagination
          background
          :current-page="pageData.current"
          :page-count="pageData.pages"
          :page-size="pageData.size"
          :total="pageData.total"
          :page-sizes="[2,4,6,8]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next">
        </el-pagination>
      </div>
      <!--客户端名称超链接的 弹出框-->
      <el-dialog :title='this.form.clientName' :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-row >
          <el-col :span="9">
            <div class="pad"><span class="span">客户端名称:</span>{{form.clientName}}</div>
          </el-col>
          <el-col :span="15">
            <div class="pad"><span class="span">客户端ID:</span>{{form.clientId}}</div>
          </el-col>
        </el-row>
        <el-col :span="20">
          <div class="pad"><span class="span">客户端密匙:</span>{{form.password}}</div>
        </el-col>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!--添加弹窗-->
      <el-dialog title="添加" :visible.sync="dialogFormAdd" width="600px">
        <el-form :model="form" :rules="rules"  ref="form" style="padding-left: 50px">
          <el-form-item label="客户端名称：" prop="clientName" :label-width="formLabelWidth" style="width: 350px">
            <el-input v-model="form.clientName"></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input type="textarea" v-model="form.remark" style="width: 300px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormAdd = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
      </el-dialog>
      <!--修改弹窗-->
      <el-dialog title="修改" :visible.sync="dialogFormUpd" width="600px">
        <el-form :model="form" :rules="rules"  ref="form" style="padding-left: 50px">
          <el-form-item label="客户端名称：" prop="clientName" :label-width="formLabelWidth" style="width: 350px">
            <el-input v-model="form.clientName"></el-input>
          </el-form-item>
          <el-form-item label="排序：" :label-width="formLabelWidth">
            <template>
              <el-input-number v-model="form.sort" @change="handleChange" :min="1" :max="100" size="medium" style="width: 59%"></el-input-number>
            </template>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input type="textarea" v-model="form.remark" style="width: 300px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormUpd = false">取 消</el-button>
          <el-button type="primary" @click="UpdSub('form')">确 定</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>
    export default {
      name: "AppAdministration",
      data() {
        return {
          tableData: [{
            id:'1',
            clientName:'领克学院',
            clientId:'abcdefghijklmnopqrstuvwxyz',//客户端id
            remark:'这是一个手机客户端',
            sort:1,//排序
            statusId:0,//状态
            password:'dfs654145gs4z5d465a4',//密钥
          },{
              id:'1',
              clientName:'战争学院',
              clientId:'abcdefghijklmnopqrstuvwxyz',
              remark:'这是一个符文大陆',
              sort:2,
              statusId:1,
              password:'dsf14684gf65s32sdf46sa4g8',
            }],
          dialogVisible: false,//客户端名称超链接的 弹出框
          dialogFormAdd: false,//添加弹窗
          dialogFormUpd:false,//修改弹窗
          //模糊查询 和 分页插件 的属性
          pageData:{
            clientName:'',
            current:1,
            pages:0,
            size:2,
            total:5,
          },
          //添加和修改的全部属性
          form: {
            clientName: '',
            remark:'',
            sort:'',
            password:'',
          },
          //表单验证方法
          rules: {
            clientName: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 2 到 8 个字符', trigger: 'blur' }
            ],
          },
          formLabelWidth: '120px'
        }
      },
      methods:{
        tableRowClassName({row, rowIndex}) {//状态不正常，该行变色
          if (row.statusId === 1) {
            return 'warning-row';
          } else {
            return '';
          }
        },
        //状态改变开关
        changeStu(row){

        },
        //客户端名称超链接弹出框
        getMessage(row){
          this.dialogVisible=true;
          this.form=row;
        },
        //客户端名称超链接弹出框的 右上角关闭提示
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        //行尾操作：修改
        handleEdit(row){
          this.dialogFormUpd=true;
          this.form = row;
        },
        //修改表单中的计数器的加减方法
        handleChange(value){
          this.form.sort=value;
        },
        //修改后提交
        UpdSub(form){

        },
        //行尾操作：删除
        handleDelete(val){

        },
        //模糊查询提交
        selectSub(val){

        },
        //模糊查询重置
        replacement(){
          Object.assign(this.$data.pageData,this.$options.data().pageData)
        },
        //添加按钮
        insertSub(){
          this.dialogFormAdd=true;
          Object.assign(this.$data.form,this.$options.data().form)
        },
        //添加的提交
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        //分页的两个方法
        handleSizeChange(val){
          this.pageData.size=val;
        },
        handleCurrentChange(val){
          this.pageData.current=val;
        },
      }
    }
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }
  .pad{
    padding: 18px;
  }
  .span{
    margin-right: 10px;
    font-weight: bold;
  }
</style>
